<template>
	<div class="list-content">
		<div class="topic-list" v-for="item in items">
			<router-link :to="{name:'index'}" class="head-img">
				<img :src="item.author.avatar_url" alt="avater">
			</router-link>
			<span class="info-count">
				<span class="reply-count">{{item.reply_count}}</span>
				<span>/</span>
				<span>{{item.visit_count}}</span>
			</span>
			<div class="update-time">
				<span>{{item.last_reply_at | timeToNow}}</span>
			</div>
			<div class="topic-title">
				<router-link :to="{name: 'topic',params : {id : item.id}}" v-if="item.author_id">
					<span class="top" v-if="item.top">置顶</span>
					<span class="top" v-if="item.good">精华</span>
					<span class="top normal" v-if="!item.top&&!item.good&&item.tab">
						{{item.tab | transTab}}
					</span>
					{{item.title}}
				</router-link>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props: ['items'],//向父组件获取信息
	data() {
		return {

		};
	},
	beforeMount() {

	}
}

</script>

<style lang='scss' scoped>
   	.list-content{
   		width: 100%;
   		overflow: hidden;
   		.topic-list{
   			width: 100%;
   			overflow: hidden;
   			padding: 10px;
   			box-sizing: border-box;
   		}
   	}
	.head-img{
		float: left;
		width: 30px;
		height: 30px;
		img{
			width: 30px;
			border-radius: 2px;
		}
	}
	.info-count{
		float: left;
		font-size: 12px;
		width: 70px;
		height: 30px;
		line-height: 30px;
		padding-left: 10px;
		.reply-count{
			color: #9e78c0;
		}
	}
	.update-time{
		float: right;
		font-size: 12px;
		height: 30px;
		line-height: 30px;
		padding-left: 5px;
	}
	.topic-title{
		font-size: 13px;
		margin-right: 3px;
		a {
	    color: #333;
	    line-height: 30px;
	    overflow: hidden;
	    vertical-align: middle;
	    display: block;
	    white-space: nowrap;
	    text-overflow: ellipsis;
	  }
	}
	.top{
		background-color: #80BD01;
	    font-size: .6em;
	    padding: 3px;
	    color: #FFF;
	    margin: 0 3px;
	    border-radius: 3px;
	}
	.normal{
		background-color: #E5E5E5;
    	color: #999;
	}
</style>